<template>
<!--分类card-->
    <view class="root-box">

        <view class="classify-box" v-for="(item,index) in serviceList" :key="index" >
            <view v-if="item.children.length>0">
            <view class="classify-title" >
                {{item.label}}
            </view>
            <view class="classify-bottom">
                <view 
                class="classify-item" 
                v-for="(cf,k) in item.children" 
                :key="k"
                @click="jumpTopage(cf)"
                >
                    <image 
                    class="iconImg"
                     :src="cf.icon?cf.icon:'../../static/homeicon/default.png'"
                   >
                    </image>
                     <view class="desc">{{cf.label?cf.label:cf.category}}</view>
                </view>
            </view>
            </view>

        <!-- <view  v-else class="nullBox">
             :src="cf.icon?cf.icon:'../../static/homeicon/default.png'"
            <image class="null_img" src="../../static/null.png" mode='widthFix'></image>
                <view  class="nullText">暂无内容~</view>
        </view> -->


        </view>




    </view>
</template>

<script>
export default {
    props:{
        serviceList: {
            type:Array,
            default:()=>[]
        }
    },
    data () {
        return {

        }
    },
    mounted() {
        console.log(this.serviceList)
    },
    methods: {
        jumpTopage (value) {
            console.log(value.id)
                var label = value.label ? value.label :value.category
                uni.navigateTo({
                    url: '../../pageTwo/serviceList/index?id='+value.id+'&searchValue='+label,
                })

        }
    }
    
}
</script>
<style lang="scss" scoped>
.classify-box{
    .classify-title{
        font-size: 14px;
        color: #333;
        font-weight: 700;
        margin-left: 20rpx;
    }
    .classify-bottom{
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap;
        .classify-item{
            width: 33%;
            text-align: center;
            margin-bottom: 15px;
            .iconImg{
                width: 30px;
                height: 30px;
                
            }
            .desc{
                font-size: 12px;
            }
        }
    }

    .nullBox{
        width: 60%;
        text-align: center;
        margin: 0 auto;
        .null_img{
            width: 100%;
        }

    }

}

</style>